<template>
  <div class="div-container" @mouseenter="isCopied = true" @mouseleave="isCopied = false">
    <div class="copy-div" v-show="isCopied">
      <el-button size="small" type="primary" plain @click="callback" v-if="writeFlag">修 改</el-button>
      <el-button size="small" type="success" plain @click="copyData">复 制</el-button>
    </div>
    <div class="code-div">
      <pre><code>{{ showStr }}</code></pre>
    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import CommonUtils from "@/utils/CommonUtils";

export default {
  name: "MyCode",
  props: {
    showStr: {
      type: String,
      default: ''
    },
    writeFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isCopied: false
    }
  },
  methods: {
    copyData() {
      CommonUtils.copyTextIn(this.showStr)
    },
    callback() {
      this.$emit('update');
    }
  }
}
</script>

<style scoped>
.div-container {
  position: relative;
  border-radius: 6px;
}

.copy-div {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 2;
}

.code-div {
  z-index: 1;
  background-color: gray;
  border-radius: 8px;
}

code {
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  display: block;
  white-space: pre-wrap;
  margin: 0;
}

pre {
  background-color: #eee;
  padding: 10px;
  line-height: 1.2;
  margin: 0;
  border-radius: 6px;
}
</style>